import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import { generate } from '@ant-design/colors';
interface ThemeToken {
  colorPrimary: string;
  colorBgBase: string;
}

interface ThemeConfig {
  token: ThemeToken;
}
const themePresets = {
  light: {
    '--primary-color': 'red',
    '--bg-color-base': '#ffffff',
    '--text-color-dark': 'rgba(0, 0, 0, 0.85)'
  },
  dark: {
    '--primary-color': 'green',
    '--bg-color-base': '#141414',
    '--text-color-dark': 'rgba(255, 255, 255, 0.85)'
  },
  bomu: {
    '--primary-color': '#F5222D',
    '--bg-color-base': '#ffffff',
    '--text-color-dark': 'rgba(0, 255, 0, 0.85)'
  },
  huoshan: {
    '--primary-color': '#FA541C',
    '--bg-color-base': '#ffffff',
    '--text-color-dark': 'rgba(255, 0, 0, 0.85)'
  },
  rimu: {
    '--primary-color': '#FAAD14',
    '--bg-color-base': '#ffffff',
    '--text-color-dark': 'rgba(0, 0, 0, 0.85)'
  },
  mingqing: {
    '--primary-color': '#13C2C2',
    '--bg-color-base': '#ffffff',
    '--text-color-dark': 'rgba(0, 0, 0, 0.85)'
  },
  jiguang: {
    '--primary-color': '#52C41A',
    '--bg-color-base': '#ffffff',
    '--text-color-dark': 'rgba(0, 0, 0, 0.85)'
  },
  fuxiao: {
    '--primary-color': '#1890FF',
    '--bg-color-base': '#ffffff',
    '--text-color-dark': 'rgba(0, 0, 0, 0.85)'
  },
  jike: {
    '--primary-color': '#2F54EB',
    '--bg-color-base': '#ffffff',
    '--text-color-dark': 'rgba(0, 0, 0, 0.85)'
  },
  jiangzi: {
    '--primary-color': '#722ED1',
    '--bg-color-base': '#ffffff',
    '--text-color-dark': 'rgba(0, 0, 0, 0.85)'
  }
};
export const useThemeStore =  defineStore('theme', () => {
  const themeMode = ref<'light' | 'dark' | 'bomu' | 'huoshan' | 'rimu' | 'mingqing' | 'jiguang' | 'fuxiao' | 'jike' | 'jiangzi'>('light');
  const primaryColor = ref(themePresets[themeMode.value]['--primary-color'] as any);
  const primaryColors = computed(() => generate(primaryColor.value));
  // 主题配置
  const themeConfig = computed<ThemeConfig>(() => ({
    token: {
      colorPrimary: primaryColor.value,
      colorBgBase: themePresets[themeMode.value]['--bg-color-base']
    }
  }));
  // 修改主色
  const changePrimaryColor = (code: string) => {
    primaryColor.value = themePresets[code]['--primary-color']
    const theme = themePresets[code]
    const root = document.documentElement
    // 批量更新CSS变量
    Object.entries(theme).forEach(([key, value]) => {
      root.style.setProperty(key, value)
    })
    localStorage.setItem('THEME_COLOR', code)
  }
  return { 
    themeMode,
    primaryColor,
    themeConfig,
    changePrimaryColor
  }
});

